 <style type="text/css"> 
 /*#tu_1{
    width: 60%;
    height: 350px;
    background: url('assets/images/tu-9.png') no-repeat center center;
    background-size: 100% 100%;

}*/
#tu_2{
    width: 39%;
    height: 320px;
    background: url('assets/images/tu-5.png') no-repeat center center;
    background-size: 100% 100%;
    float: right;
    font-size: 5px;
    /*margin-top: -350px;*/
}
#tu_4{
 width: 39%;
 height: 320px;
 background: url('assets/images/tu-6.png') no-repeat center center;
 background-size: 100% 100%;
 float:right;
 margin-top: -270px;  
}
#tu_3{
    width: 60%;
    height: 80px;
    background: url('assets/images/tu-12.png') no-repeat center center;
    background-size: 100% 100%;
    margin-right:-40% ; 
    }
#tu_5{
    width: 60%;
    height: 180px;
}
#tu_1 li,#tu_2 li {
    font-size: 10px;-webkit-transform:scale(0.8);
}
#tu_3 li{
 text-align: center;   
 float:left;

}
#tu_5 li{
 font-size: 10px;-webkit-transform:scale(1);
 float:left;
} 
h2{
	font-size: 25px;-webkit-transform:scale(1.4);
}
</style> 
<section id="page-title"><div class="row"><div class="col-sm-8"><h1 class="mainTitle">监控列表</h1><span class="mainDescription">监控列表,点击操作处理任务</span></div></div></section>
<div ng-controller="watchCtrl">
   <!--  <div id="tu_1">
        <ul class="menu" ng-repeat="item in aptu"  >
            <li style="position: absolute;top:{{item.y}}px;left:{{ item.x}}px; float:left; list-style:none;"> 
                <img src="assets/images/red.png" style="width:8px;background-color: {{item.color}};" ng-mouseover="loadhover(item.id,item.shortname,item.x,item.y)" ng-mouseout="loadout()" ng-click="loadClient(item.id,item.shortname,item.x,item.y)" > {{item.shortname}}
            </li >  
        </ul>
    </div> -->
    
    <div id="tu_2" class="com">
        <li style="float:left;margin-top:44px;overflow:hidden;  list-style:none;width:33%;white-space: nowrap;text-overflow: ellipsis; " > 
            <div ng-repeat="item in apcpu">  {{item.id}}  
                <div   style=" width:{{item.per}}px;height: 10px;background-color: {{ item.color}};"> 
                    <div style="margin-left:105px;">  {{item.per}}% </div>
                </div>
            </div> 

        </li> 

        <li style="float:left;overflow:hidden;margin-top:46px;list-style:none;list-style:none;width:33%;white-space: nowrap;text-overflow: ellipsis; " > 
            <div ng-repeat="item in apnei">{{item.id}}
                <div   style=" width:{{ item.per}}px;height: 10px;background-color: {{ item.color}};;"> 
                    <div style="margin-left:105px">{{item.per}}%</div>
                </div>
            </div> 
        </li>
        <li style="float:left;overflow:hidden; margin-top:46px;list-style:none; list-style:none;width:33%;white-space: nowrap;text-overflow: ellipsis; "> 
            <div ng-repeat="item in apchu">{{item.id}}
                <div   style=" width:{{ item.per}}px;height: 10px;background-color: {{ item.color}};;"> 
                    <div style="margin-left:105px">{{item.per}}%</div>
                </div>
            </div> 
        </li>
    </div> 
    <!-- 故障列表 start-->
    
    <div  id="tu_3">
      <ul style="width:100%; list-style:none;">
        <li style=" margin-top:9%; width:5% ;margin-left:-35px ">ID </li>
        <li style="width:20%;margin-top:9%;"> 发生时间 </li>
        <li style="width:25%;margin-top:9%;">告警源</li> 
        <li style=" width:5%;margin-top:9%;margin-left:5px   ">状态  </li>
        <li style=" width:15%;margin-top:9%;">  描叙 </li> 
        <li style=" width:10%;margin-top:9%;">类型  </li>
        <li style=" width:10%;margin-top:9%;"> 等级  </li>
        <li style="width:10%;margin-top:9%;margin-left:10px ">数据来源 </li>
      </ul>
    </div>
    <div id="tu_5" style="overflow:auto; height:530px;">
 
            <ul ng-repeat="item in apList" style="width:100%; float:left;list-style:none; ">
              <button   ng-click="details(item.id,item.from); " style="width:110%;height:30px;margin-left:-45px;">
                <li style=" width:5%;margin-left:0px;  ">{{item.id}}</li> 
                <li style=" width:20%;">{{item.time}}</li> 
                <li style="  width:25%;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;">{{item.jing}} </li> 
                <li style="  width:5%;font-color:{{color}} ">{{item.statu}}</li> 
                <li style="width:15%;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;"> {{item.text}} </li> 
                <li style=" margin-left:1px;    width:10% ;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;  ">{{item.lei}}</li> 
                <li style="  width:9%   ">{{item.ji}}</li> 
                <li style="   width:10% ;float:right; ">{{item.from}}</li>  
              </button> 
            </ul>   
        
    </div> 
    <!-- 故障列表 end -->
    <div id="tu_4"  >
        <li  style="float:left;list-style:none;width:33%">
            <div id="tradeNum" style="margin-top:60%; margin-left:5%;"></div> 
            <div ng-repeat="item in apjiao"  style="margin-top:10px;margin-left:5%;" >
                <div >总交易量：{{item.all}} </div>
                <div>交易成功量：{{item.success}}</div> 
                <div>交易失败量：{{item.fail}}</div>
        </li>
        <li  style="float:left;list-style:none;width:33%">
            <div ng-repeat="item in apjiao" style="margin-top:100%; margin-left:35%;"><h2>{{item.time}}ms</h2></div>
        </li>

        <li  style="float:left;list-style:none;width:33%" >
            <div ng-repeat="item in apjiao" style="margin-top:100%; margin-left:25%;"><h2> {{item .lv}}%</h2></div>			
        </li>
    </div>
</div>
 